<template>
  <div class="problem-info">
    <el-card>
      <div slot="header" align="center">
        <h1>{{ model.title }}</h1>
      </div>
      <div class="description">
        <h2>题目描述</h2>
        <my-markdown :content="model.description" class="markdown-body"/>
      </div>
      <div class="input">
        <h2>输入格式</h2>
        <my-markdown :content="model.inputDesc" class="markdown-body"></my-markdown>
      </div>
      <div class="output">
        <h2>输出格式</h2>
        <my-markdown :content="model.outputDesc" class="markdown-body"></my-markdown>
      </div>
      <div class="input-sample">
        <h2>输入样例</h2>
        <pre v-html="model.inputSample"></pre>
      </div>
      <div class="output-sample">
        <h2>输出样例</h2>
        <pre v-html="model.outputSample"></pre>
      </div>
      <div class="hint">
        <h2>样例解释</h2>
        <my-markdown :content="model.hint" class="markdown-body"></my-markdown>
      </div>
      <div class="data-desc">
        <h2>数据范围</h2>
        <my-markdown :content="model.dataDesc" class="markdown-body"></my-markdown>
      </div>
      <div class="source">
        <h2>来源</h2>
        <div>{{ model.source }}</div>
      </div>
    </el-card>
  </div>
</template>

<script>
import MyMarkdown from "@/components/common/markdown/MyMarkdown";  // language

export default {
  name: "ProblemDetailInfo",
  props: {
    model: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  components: {
    MyMarkdown
  }
}
</script>

<style lang="scss" scoped>

.problem-info {

  h1,
  h2 {
    color: #337ab7;
  }

  .description,
  .input,
  .output,
  .source,
  .data-desc,
  .hint {
    font-size: 15px;
  }

  .input-sample,
  .output-sample {
    pre {
      margin: 0px;
      display: block;
      padding: 10px;
      font-size: 14px;
      line-height: 1.5;
      border: 1px solid #eaeefb;
      background-color: #fafafa;
      color: #333;
      border-radius: 4px;
      font-family: Menlo, Monaco, Consolas, monospace;
    }
  }

  .sidebar {
    span {
      font-size: 12px;
    }

    .divider {
      border-bottom: 1px dotted #e9eaec;
      margin-bottom: 15px;
    }
  }
}
</style>